<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .b1{
      width: 100px;
      height: 100px;
      margin-bottom: 30px;
      background-color: blue;
    }
    .b2{
      width: 100px;
      height: 100px;
      margin-top: 40px;
      background-color: brown;
    }
  </style>
</head>
<body>
  <!-- [css] 要让Chrome支持小于12px的文字怎么做？ -->
  
  Chrome 中有最小字号的限制，一般为 12px。原因是 Chrome 认为小于这个字号会影响阅读。

  当需要小于 12px 字体的时候，有以下几个方法可以使用。
  
  -webkit-text-size-adjust:none; 这个属性在高版本的 Chrome 中已经被废除。
  使用 transform: scale(0.5, 0.5)，但使用 transform 需要注意下面几点：
  transform 对行内元素无效，因此要么使用 display: block; 要么使用 display: inline-block;
  transform 即使进行了缩放，原来元素还是会占据对应的位置。因此需要做调整，最好是在外面再包一层元素，以免影响其他元素。
  作为图片。
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
<style>

</style>